<template>
  <t-divider align="left">请求内容</t-divider>
  <t-textarea
    v-model="requestData"
    placeholder=""
    name="description"
    :autosize="{ minRows: 5, maxRows: 5 }"
    :readonly="true"
  />
  <t-divider align="left">响应内容</t-divider>
  <t-textarea
    v-model="props.data.response.data"
    :readonly="true"
    placeholder=""
    name="description"
    :autosize="{ minRows: 11, maxRows: 15 }"
  />
</template>

<script setup lang="ts">
import { defineProps, ref, watch } from 'vue';

const props = defineProps({
  data: {
    type: Object,
  },
});
const requestData = ref('');

watch(props, (newVal, oldVal) => {
  console.log('newVal', JSON.stringify(props));
  requestData.value = `${newVal.data.request.url} ${newVal.data.request.data}`;
});
</script>

<style></style>
